import { ScrollView, StyleSheet, Text, View } from 'react-native'
import { common } from '../../assets/style/common'

export default function SelectGoodTab() {
  return (
    <View style={style.contain}>
      <View>
        <Text>好物榜单</Text>
        <Text>更多</Text>
        <Text style={style.arrow}>&#xe643;</Text>
      </View>
      <CardList />
    </View>
  )
}
function CardList() {
  const list = [
    {
      id: 1,
      title: '好物分类1',
      bgmColor: '#9DA9B5',
      list: [
        { id: 1, title: '好物标题1', desc: '好物描述1', cover: '' },
        { id: 2, title: '好物标题2', desc: '好物描述2', cover: '' },
        { id: 3, title: '好物标题3', desc: '好物描述3', cover: '' },
      ],
    },
    {
      id: 2,
      title: '好物分类2',
      bgmColor: '#948DA3',
      list: [
        { id: 1, title: '好物标题1', desc: '好物描述1', cover: '' },
        { id: 2, title: '好物标题2', desc: '好物描述2', cover: '' },
        { id: 3, title: '好物标题3', desc: '好物描述3', cover: '' },
      ],
    },
    {
      id: 3,
      title: '好物分类3',
      bgmColor: '#AAB68F',
      list: [
        { id: 1, title: '好物标题1', desc: '好物描述1', cover: '' },
        { id: 2, title: '好物标题2', desc: '好物描述2', cover: '' },
        { id: 3, title: '好物标题3', desc: '好物描述3', cover: '' },
      ],
    },
  ]
  return (
    <ScrollView style={style.scrollCnt} horizontal={true}>
      {list.map(item => (
        <CardItem key={item.id} {...item} />
      ))}
    </ScrollView>
  )
}
interface CardItemProp {
  bgmColor?: string
  title?: string
  list?: any[]
}
function CardItem(props: CardItemProp) {
  return (
    <View style={[cStyle.container, { backgroundColor: props.bgmColor }]}>
      <View>
        <Text style={cStyle.top}>Top</Text>
        <Text style={cStyle.tit}>{props.title}</Text>
      </View>
      {props.list &&
        props.list.map((item, key) => (
          <View style={common.flexCol} key={key}>
            <View style={cStyle.coverWrap}>
              <View style={cStyle.cover} />
              <View>
                <Text numberOfLines={1} style={cStyle.itemTit} />
                <Text style={cStyle.itemTip} />
              </View>
            </View>
          </View>
        ))}
    </View>
  )
}
const cStyle = StyleSheet.create({
  container: {},
  top: {},
  tit: {},
  cover: {},
  coverWrap: {},
  itemTit: {},
  itemTip: {},
})
const style = StyleSheet.create({
  contain: {
    width: 'auto',
    height: '100%',
    backgroundColor: '#ffff00',
  },
  card: {
    width: 120,
    height: 120,
    backgroundColor: '#888',
  },
  arrow: {
    fontFamily: 'iconfont',
  },
  scrollCnt: {},
})
